<template>
	<div class="song-detail">
        <div class="left" v-if="info">
            <img :src="getUrl(info.songPic)" alt="">
            <h1>{{ getSongTitle(info.name) }}</h1>
            <p><el-icon class="user-icon"><User /></el-icon>{{ getSingerName(info.name) }}</p>
            <p><span>专辑：</span>{{ info.source }}</p>
            <el-button class="btn" type="success" @click="playSong">
                <IconPark :icon="PlayOne" size="18" />
                <span>播放</span>
            </el-button>
            <IconPark class="icon-like"  size="25" 
             />
            <el-rate v-model="rate" size="large" @change="operateRate" />
        </div>
        <el-scrollbar  class="right">
            <p
            v-for="(item, index) in wordList"
            :key="index"
        >
            {{ item.lrc }}
        </p>
        </el-scrollbar>
	</div>
    <div class="bottom-comment">
        <Comment :id="id" :type="2" />
    </div>    
</template>

<script setup lang="ts">
import IconPark from '@/components/common/IconPark.vue';
import { PlayOne } from "@icon-park/vue-next";
import { ref } from "vue";
import { getSongOfId, addOrUpdateRate, searchRate } from '@/api';
import { useRoute } from 'vue-router';
import { formatLyric, getUrl } from '@/utils/format';
import { useSongStore } from '@/store/song';
const { getSongTitle, getSingerName, play, addPlayList } = useSongStore();
import { useUserStore } from "@/store/user"
import Comment from '@/components/Comment.vue';


const { userId } = useUserStore();
const route = useRoute()
const id = Number(route.params.id)
const rate = ref(0)
const info = ref(null)
const wordList = ref([])
let params = {
    userId,
    rateId: id,
    type: 1,
    rate: rate.value,
    id: null
}

getWord()
async function  getWord() {
    const res = await getSongOfId(id)    
    info.value = res
    wordList.value = formatLyric(res.lyric)
    
}

getRate()
async function  getRate() {
    const res = await searchRate({
        userId,
        rateId: id,
        type: 1
    })
    if(res){
        params = res
        rate.value = res.rate
    }
}

async function operateRate () {
    params.rate = rate.value
    const res = await addOrUpdateRate(params)
    
}


const playSong = () => {
	addPlayList(true, [info]);
	play(info.value.id);
};
</script>

<style lang="scss" scoped>
.song-detail {
    display: flex;
    height: 600px;
	.left {
        width: 600px;
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
            width: 300px;
            height: 300px;
            border-radius: 20px;
            object-fit: cover;
        }

        h1 {
            margin-bottom: 18px;
        }

        p {
            font-size: 18px;
            display: flex;
            align-items: center;
            color: #797878;

            .user-icon {
                margin-right: 5px;
                color: #999;
            }
        }

        .btn{
            margin: 18px;
        }
    }

    .right {
        height: 100%;
        margin-left: 150px;
        width: max-content;
        padding-right: 80px;
        overflow: auto;
    }
}
.bottom-comment{
    margin-top: 50px;
    display: flex;
    width: 100%;
}
</style>
